<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>合并标注</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.css">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
  <link rel="stylesheet" type="text/css" href="dist/css/windy.css" />
  <!-- <link rel="stylesheet" type="text/css" href="dist/css/style1.css" /> -->
  <noscript>
    <link rel="stylesheet" type="text/css" href="dist/css/noJS.css" /></noscript>
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
  <style>
    .card{border-radius: 3px;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);}
      ul table {font-size: 12px;line-height: 12px;padding: 2px}
      ul table img{height: 50px;margin: 3px;}
      ul table tbody tr td{padding: 2px;}
      ul table td p{margin: 0px; width: 250px;text-overflow: ellipsis; overflow:hidden; white-space: nowrap;}
      ul table td p:hover{width: 250px;text-overflow: ellipsis; overflow:auto; white-space:inherit;}
      ul table table {font-size: 10px;}
      ul table table th{line-height: 10px;border: 1px solid #999;}
      ul table table td{line-height: 10px;border: 1px solid #999; padding: 1px;}
      .btn-box{text-align: center;margin: 5px}
      ul.wi-container{height: 240px;margin-bottom: 0;}
      ul.wi-container li {overflow:scroll;}
      .main-footer{padding: 10px 15px;}
      .pic-div{width: 100%;overflow-x: scroll;}
      em{color: #f66;font-weight: bold;font-style:normal;}
    </style>
</head>
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->

<body class="hold-transition skin-blue layout-top-nav">
  <div class="wrapper">

    <header class="main-header">
      <nav class="navbar navbar-static-top">
        <div class="container">
          <div class="navbar-header">
            <a href="index.html" class="navbar-brand"><b>Merger</b>标注工具</a>
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
              <i class="fa fa-bars"></i>
            </button>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li><a href="#" id="open_file" onclick="open_file()">导入数据</a></li>
              <li><a href="#" onclick="save_tagged_file()">导出标注</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能选择<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="index.html">合并标注</a></li>
                  <!-- <li class="divider"></li>
                  <li><a href="#">敬请期待</a></li>
                  <li class="divider"></li>
                  <li><a href="#">敬请期待</a></li> -->
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <!-- 搜索框不需要 -->
                <!-- <input type="text" class="form-control" id="navbar-search-input" placeholder="Search"> -->
              </div>
            </form>
          </div>
          <!-- /.navbar-collapse -->
          <!-- Navbar Right Menu -->
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- Messages: style can be found in dropdown.less-->
              <li class="dropdown messages-menu">
                <!-- Menu toggle button -->
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-envelope-o"></i>
                  <span class="label label-success">0</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你没有新消息。</li>
                  <li>
                    <!-- inner menu: contains the messages -->
                    <ul class="menu">
                      <li>
                        <!-- start message -->
                        <a href="#">
                          <div class="pull-left">
                            <!-- User Image -->
                            <img src="dist/img/developer.png" class="img-circle" alt="User Image">
                          </div>
                          <!-- Message title and timestamp -->
                          <h4>
                            开发团队
                            <small><i class="fa fa-clock-o"></i> 5 分前</small>
                          </h4>
                          <!-- The message -->
                          <p>辛苦辛苦。</p>
                        </a>
                      </li>
                      <!-- end message -->
                    </ul>
                    <!-- /.menu -->
                  </li>
                  <li class="footer"><a href="#">好的</a></li>
                </ul>
              </li>
              <!-- /.messages-menu -->

              <!-- Notifications Menu -->
              <li class="dropdown notifications-menu">
                <!-- Menu toggle button -->
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-bell-o"></i>
                  <span class="label label-warning">0</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你没有新通知。</li>
                  <li>
                    <!-- Inner Menu: contains the notifications -->
                    <ul class="menu">
                      <li>
                        <!-- start notification -->
                        <a href="#">
                          <i class="fa fa-users text-aqua"></i> 今天新来了5个小伙伴
                        </a>
                      </li>
                      <!-- end notification -->
                    </ul>
                  </li>
                  <li class="footer"><a href="#">好的</a></li>
                </ul>
              </li>
              <!-- Tasks Menu -->
              <li class="dropdown tasks-menu">
                <!-- Menu Toggle Button -->
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="fa fa-flag-o"></i>
                  <span id="task-num" class="label label-danger">0</span>
                </a>
                <ul class="dropdown-menu">
                  <li id="task-header" class="header">你还没有启动标注任务</li>
                  <li>
                    <!-- Inner menu: contains the tasks -->
                    <ul class="menu">
                      <li>
                        <!-- Task item -->
                        <a href="#">
                          <!-- Task title and progress text -->
                          <h3>
                            标注进度：
                            <small id="process-text" class="pull-right">还剩0条</small>
                          </h3>
                          <!-- The progress bar -->
                          <div class="progress xs">
                            <!-- Change the css width attribute to simulate progress -->
                            <div id="process-bar" class="progress-bar progress-bar-aqua" style="width: 0%" role="progressbar">
                            </div>
                          </div>
                        </a>
                      </li>
                      <!-- end task item -->
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">好的</a>
                  </li>
                </ul>
              </li>
              <!-- User Account Menu -->
              <li class="dropdown user user-menu">
                <!-- Menu Toggle Button -->
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <!-- The user image in the navbar-->
                  <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                  <!-- hidden-xs hides the username on small devices so only the image appears. -->
                  <span class="hidden-xs">编号89757</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- The user image in the menu -->
                  <li class="user-header">
                    <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

                    <p>
                      编号89757
                      <small>你刚刚加入了组织</small>
                    </p>
                  </li>
                  <!-- Menu Body -->
                  <li class="user-body">
                    <div class="row">
                      <div class="col-xs-4 text-center">
                        <a href="#">施工中</a>
                      </div>
                      <div class="col-xs-4 text-center">
                        <a href="#">施工中</a>
                      </div>
                      <div class="col-xs-4 text-center">
                        <a href="#">施工中</a>
                      </div>
                    </div>
                    <!-- /.row -->
                  </li>
                  <!-- Menu Footer-->
                  <li class="user-footer">
                    <div class="pull-left">
                      <a href="#" class="btn btn-default btn-flat">施工中</a>
                    </div>
                    <div class="pull-right">
                      <a href="#" class="btn btn-default btn-flat">施工中</a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- /.navbar-custom-menu -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </header>
    <!-- Full Width Column -->
    <div class="content-wrapper">
      <div class="container">
        <!-- Content Header (Page header) -->
        <!-- <section class="content-header">
        <h1>
          合并标注
          <small></small>
        </h1>
        <ol class="breadcrumb">
          <li><a href="#"><i class="fa fa-dashboard"></i>Merger标注工具</a></li>
          <li class="active">合并标注</li>
        </ol>
      </section> -->

        <!-- Main content -->
        <section class="content" id="main-section" style="display:none;">
          <div id="taged-cards" class="row">
            <!-- Default box -->
            <div id="cards1" class="col-xs-4">
              <div class="card">
                <ul id="wi-el-1" class="wi-container">
                </ul>
              </div>
              <!-- /.box-body -->
              <div class="btn-box">
                <div class="btn-group">
                  <button id="nav-prev-1" onclick="windy1.prev()" type="button" class="btn btn-info"><i class="fa fa-fw fa-chevron-left"></i></button>
                  <button id="nav-delete-1" onclick="untag(0,windy1.current)" type="button" class="btn btn-danger"><i
                      class="fa fa-fw fa-chevron-down"></i></button>
                  <button id="nav-next-1" onclick="windy1.next()" type="button" class="btn btn-info"><i class="fa fa-fw fa-chevron-right"></i></button>
                </div>
              </div>
              <!-- /.box-footer-->
            </div>
            <div id="cards2" class="col-xs-4">
              <div class="card">
                <ul id="wi-el-2" class="wi-container">
                </ul>
              </div>
              <!-- /.box-body -->
              <div class="btn-box">
                <div class="btn-group">
                  <button id="nav-prev-2" onclick="windy2.prev()" type="button" class="btn btn-info"><i class="fa fa-fw fa-chevron-left"></i></button>
                  <button id="nav-delete-2" onclick="untag(1,windy2.current)" type="button" class="btn btn-danger"><i
                      class="fa fa-fw fa-chevron-down"></i></button>
                  <button id="nav-next-2" onclick="windy2.next()" type="button" class="btn btn-info"><i class="fa fa-fw fa-chevron-right"></i></button>
                </div>
              </div>
              <!-- /.box-footer-->
            </div>
            <div id="cards3" class="col-xs-4">
              <div class="card">
                <ul id="wi-el-3" class="wi-container">
                </ul>
              </div>
              <!-- /.box-body -->
              <div class="btn-box">
                <div class="btn-group">
                  <button id="nav-prev-3" onclick="windy3.prev()" type="button" class="btn btn-info"><i class="fa fa-fw fa-chevron-left"></i></button>
                  <button id="nav-delete-3" onclick="untag(2,windy3.current)" type="button" class="btn btn-danger"><i
                      class="fa fa-fw fa-chevron-down"></i></button>
                  <button id="nav-next-3" onclick="windy3.next()" type="button" class="btn btn-info"><i class="fa fa-fw fa-chevron-right"></i></button>
                </div>
              </div>
              <!-- /.box-footer-->
            </div>
          </div>

          <div class="row">
            <div class="col-xs-4" style="text-align:center;padding:50px">
              <div class="input-group">
                <input class="form-control" id="keyword" placeholder="输入关键字...">
                <div class="input-group-btn">
                  <button type="button" onclick="resort()" class="btn btn-success"><i class="fa fa-sort-amount-desc"></i></button>
                </div>
              </div>
              <h5>输入关键字，点击排序按钮。将关键字次数最多的，或者实体总数最多的放在前面。这样标注的时候可以减少翻页。</h5>
            </div>
            <div class="col-xs-4">
              <div class="btn-box">
                <div class="btn-group">
                  <button id="prev-page-btn" type="button" class="btn btn-success" onclick="prev_page()"><i class="fa fa-fw fa-chevron-left"></i></button>
                  <button id="num1" onclick="tag1()" type="button" class="btn btn-default">1</button>
                  <button id="num2" onclick="tag2()" type="button" class="btn btn-default">2</button>
                  <button id="num3" onclick="tag3()" type="button" class="btn btn-default">3</button>
                  <button onclick="new_entity()" type="button" class="btn btn-default">+</button>
                  <button id="next-page-btn" type="button" class="btn btn-success" onclick="next_page()"><i class="fa fa-fw fa-chevron-right"></i></button>
                </div>
              </div>
              <div class="card">
                <ul id="wi-el-not-tagged" class="wi-container">
                  <!-- <li>
                    <div>

                    </div>
                  </li>
                  <li><img src="images/demo1/2.jpg" alt="image2" />
                    <h4>Vermouth Land</h4>
                    <p>Velit chambray fugiat, enim aesthetic esse ullamco typewriter.</p>
                  </li> -->
                </ul>
              </div>
            </div>
            <div class="col-xs-4">
              <h2>当前正在标注实体：</h2>
              <h3 id="current_name"></h3>
            </div>
          </div>
          <!-- /.box -->
        </section>
        <!-- /.content -->
      </div>
      <!-- /.container -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
      <div class="container">
        <div class="pull-right hidden-xs">
          <b>Version </b>0.0.2-beta
        </div>
        <strong>Copyright &copy; 2004-2018 Sogou.com</a>.</strong>
      </div>
      <!-- /.container -->
    </footer>
  </div>
  <!-- ./wrapper -->

  <!-- jQuery 3 -->
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script>if (typeof module === 'object') { window.jQuery = window.$ = module.exports; };</script>
  <!-- Bootstrap 3.3.7 -->
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- SlimScroll -->
  <script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
  <!-- FastClick -->
  <script src="bower_components/fastclick/lib/fastclick.js"></script>
  <!-- AdminLTE App -->
  <script src="dist/js/adminlte.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="dist/js/demo.js"></script>
  <script type="text/javascript" src="dist/js/modernizr.custom.79639.js"></script>
  <script type="text/javascript" src="dist/js/jquery.windy.js"></script>
  <script type="text/javascript">
    var windy1 = $('#wi-el-1').windy();
    var windy2 = $('#wi-el-2').windy();
    var windy3 = $('#wi-el-3').windy();
    var windy_not_taged = $('#wi-el-not-tagged').windy();
    const ipc = require('electron').ipcRenderer
    const selectDirBtn = document.getElementById('open_file')
    var path = require('path');
    var fs = require('fs');
    var not_tagged_entity_html = [] //[entity_html,entity_html,...]
    var not_tagged_entity_url = [] //[entity_url,entity_url,...]
    var tagged_entity_html = [] //[[entity_html,entity_html,...],[entity_html],...]
    var tagged_entity_url = [] //[[entity_url,entity_url,...],[entity_url],...]
    var tagged_entity_url_offset = 0
    var page_index = 0
    var not_save = true
    var file_lines = []
    var entity_count = 0
    var tagged_entity_count = 0
    function open_file() {
      ipc.send('open-file-dialog')
    }
    ipc.on('selected-file', function (event, path) {
      load_file(path[0])
    })
    function save_tagged_file() {
      ipc.send('save-dialog')
    }
    ipc.on('saved-file', function (event, path) {
      if (path && tagged_entity_url.length > 0 && not_save) {
        var tagged_data = ""
        for (var i in tagged_entity_url) {
          for (var j in tagged_entity_url[i]) {
            tagged_data += i + "\t" + tagged_entity_url[i][j] + "\n";
          }
        }
        fs.writeFileSync(path, tagged_data)
        not_save = false
      }
    })
    function load_file(path) {
      var data = fs.readFileSync(path, 'utf8').replace("\r", "");
      file_lines = data.split("\n");
      if (file_lines[file_lines.length - 1] == "") file_lines.pop();
      if (file_lines.length == 0) {
        alert("文件为空，没法标注。")
        return;
      }
      tagged_entity_url = []
      $("#task-num").html("1")
      $("#task-header").html("正在进行标注")
      entity_count = 0
      tagged_entity_count = 0
      var current_url = ""
      for (var i in file_lines) {
        if (file_lines[i].split("\t").length == 6 && current_url != file_lines[i].split("\t")[1]) {
          current_url = file_lines[i].split("\t")[1]
          entity_count += 1;
        }
      }
      next_entity();
    }

    function set_process() {
      var process = parseInt(100 * tagged_entity_count / entity_count)
      $("#process-text").html("还剩" + (entity_count - tagged_entity_count) + "个")
      $("#process-bar").css("width", process + "%")
    }

    function next_entity() {
      if (not_save && file_lines.length == 0) {
        save_tagged_file()
        $("#task-num").html("0")
        $("#task-header").html("当前标注任务已经完成")
        return;
      }
      var first_line = file_lines[file_lines.length - 1]
      var lines = []
      var current_name = first_line.split("\t")[2]
      $("#current_name").html(current_name)
      for (var current_line = file_lines.pop(); ; current_line = file_lines.pop()) {
        if (current_name != current_line.split("\t")[2]) {
          file_lines.push(current_line);
          break;
        } else {
          lines.push(current_line);
        }
        if (file_lines.length == 0) {
          break;
        }
      }
      var entitys_map = {}
      var error_data = []
      for (var i = 0; i < lines.length; i+= 1) {
        var line = lines[i]
        var parts = line.split("\t")
        if (parts.length == 6) {
          var entity = entitys_map[parts[1]]
          var prop_value = parts[4]
          if (prop_value.indexOf("@@@") != -1) {
            var value_parts = prop_value.split("@@@")
            prop_value = '<a href="' + value_parts[1] + '" target="blank">' + value_parts[0] + '</a>'
          }
          if (parts[3] == "图片" || parts[3] == "人工图片" || parts[3] == "人工图片推荐") {
            prop_value = '<img src="' + prop_value + '">'
          }
          if (parts[3] == "搜狗百科") {
            prop_value = '<a href="' + prop_value + '" target="blank">' + prop_value + '</a>'
          }
          if (parts[3].indexOf(":") != -1 && parts[3].indexOf("@") != -1 && parts[3].indexOf("@") != parts[3].length - 1) {
            var name_parts = parts[3].split(":")
            var real_name = name_parts[0].split("_").pop()
            var key_parts = name_parts[1].split("@")
            var col_key = key_parts[0].split("_").pop()
            var row_key = key_parts[1]
            if (typeof entity === "undefined") {
              entity = {}
              var col = {}
              col[col_key] = prop_value
              var row = {}
              row[row_key] = col
              entity[real_name] = row
              entitys_map[parts[1]] = entity
            } else {
              var prop_values = entity[real_name]
              if (typeof prop_values === "undefined") {
                var col = {}
                col[col_key] = prop_value
                var row = {}
                row[row_key] = col
                entity[real_name] = row
              } else {
                var current_row = entity[real_name][row_key]
                if (typeof current_row === "undefined") {
                  var col = {}
                  col[col_key] = prop_value
                  entity[real_name][row_key] = col
                } else {
                  entity[real_name][row_key][col_key] = prop_value
                }
              }
            }
            // alert(JSON.stringify(entity))
          } else {
            var real_name = parts[3].split("_").pop()
            if (typeof entity === "undefined") {
              entity = {}
              entity[real_name] = [prop_value]
              entitys_map[parts[1]] = entity
            } else {
              var prop_values = entity[real_name]
              if (typeof prop_values === "undefined") {
                entity[real_name] = [prop_value]
              } else {
                // entity[real_name].push(prop_value)          
              }
            }
          }
        } else if (line.length > 0) {
          error_data.push(i + 1)
        }
      }
      if (error_data.length != 0) {
        alert("第" + JSON.stringify(error_data) + "行数据非法，已忽略。")
      }
      not_tagged_entity_html = []
      not_tagged_entity_url = []
      tagged_entity_html = []
      tagged_entity_url_offset = tagged_entity_url.length
      page_index = 0
      not_save = true
      for (var url in entitys_map) {
        not_tagged_entity_url.push(url)
        not_tagged_entity_html.push(entity_to_html(url, entitys_map[url]))
      }
      if (not_tagged_entity_html.length == 0) {
        alert("没有合法数据，无法启动标注。")
        return
      }
      tagged_entity_html.push([not_tagged_entity_html.pop()])
      tagged_entity_url.push([not_tagged_entity_url.pop()])
      tagged_entity_count += 1
      if (not_tagged_entity_html.length == 0) {
        next_entity();
      } else {
        refresh_view()
        $("#main-section").show()
        $("#prev-page-btn").attr('disabled', true);
        $("#next-page-btn").attr('disabled', true);
      }
    }

    function entity_to_html(url, entity) {
      // alert(JSON.stringify(entity))
      var html = '<li><table class="table"><tbody>'
      html += '<tr><td>来源页</td><td><p><a href="' + url + '" target="blank">' + url + '</a></p></tr>'
      for (var prop_name in entity) {
        var value_obj = entity[prop_name]
        if (value_obj instanceof Array) {
          html += '<tr><td>' + prop_name + '</td><td><p>'
          for (var i = 0; i < value_obj.length; i+= 1) {
            html += value_obj[i] + '</br>'
          }
          html += '</p></tr>'
        } else {
          var col_key_list = []
          for (var col_key in Object.values(value_obj)[0]) {
            if (col_key_list.length < 5 && !col_key_list.hasOwnProperty(col_key)) {//限制最多5列
              col_key_list.push(col_key)
            }
          }
          html += '<tr><td>' + prop_name + '</td><td><table class="value-table"><tr>'
          for (var i in col_key_list) {
            html += '<th>' + col_key_list[i] + '</th>'
          }
          html += '</tr>'
          var row_count = 0
          for (var row_key in value_obj) {
            row_count += 1
            if (row_count > 10) break;//限制最多10行
            html += '<tr>'
            for (var i in col_key_list) {
              var col_key = col_key_list[i]
              html += '<td>' + value_obj[row_key][col_key] + '</td>'
            }
            html += '</tr>'
          }
          html += '</table></tr>'
        }
      }
      return html + '</tbody></table></li>'
    }
    var max_show_cards = 100
    function refresh_view() {
      var all_tagged_html1 = ""
      var all_tagged_html2 = ""
      var all_tagged_html3 = ""
      var current_not_tagged_html = ""
      if (not_tagged_entity_html.length > 0) {
        current_not_tagged_html = not_tagged_entity_html[not_tagged_entity_html.length - 1]
      }
      var tagged_entity_html_1 = tagged_entity_html[page_index * 3].slice(-max_show_cards)
      var tagged_entity_html_2 = tagged_entity_html[page_index * 3 + 1]
      var tagged_entity_html_3 = tagged_entity_html[page_index * 3 + 2]
      for (var i = 0; i < tagged_entity_html_1.length; i+= 1) {
        all_tagged_html1 += tagged_entity_html_1[tagged_entity_html_1.length - 1 - i]
      }
      if (typeof tagged_entity_html_2 === "undefined") {
        $("#cards2").hide();
        $("#num2").hide();
      } else {
        $("#cards2").show();
        $("#num2").show();
        tagged_entity_html_2 = tagged_entity_html_2.slice(-max_show_cards)
        for (var i = 0; i < tagged_entity_html_2.length; i+= 1) {
          all_tagged_html2 += tagged_entity_html_2[tagged_entity_html_2.length - 1 - i]
        }
      }
      if (typeof tagged_entity_html_3 === "undefined") {
        $("#cards3").hide();
        $("#num3").hide();
      } else {
        tagged_entity_html_3 = tagged_entity_html_3.slice(-max_show_cards)
        $("#cards3").show();
        $("#num3").show();
        for (var i = 0; i < tagged_entity_html_3.length; i+= 1) {
          all_tagged_html3 += tagged_entity_html_3[tagged_entity_html_3.length - 1 - i]
        }
      }
      $("#wi-el-1").html(all_tagged_html1)
      $("#wi-el-2").html(all_tagged_html2)
      $("#wi-el-3").html(all_tagged_html3)
      $("#wi-el-not-tagged").html(current_not_tagged_html)
      $("#num1").html(page_index * 3 + 1)
      $("#num2").html(page_index * 3 + 2)
      $("#num3").html(page_index * 3 + 3)
      windy1 = $("#wi-el-1").windy()
      windy2 = $("#wi-el-2").windy()
      windy3 = $("#wi-el-3").windy()
      windy_not_taged = $('#wi-el-not-tagged').windy();
      $("#next-page-btn").attr('disabled', false);
      $("#prev-page-btn").attr('disabled', false);
      if (page_index == 0) {
        $("#prev-page-btn").attr('disabled', true);
      }
      if ((page_index + 1) * 3 >= tagged_entity_html.length) {
        $("#next-page-btn").attr('disabled', true);
      }
      set_process()
    }
    function prev_page() {
      if (page_index > 0) {
        page_index -= 1
        refresh_view()
      }
    }
    function next_page() {
      if ((page_index + 1) * 3 < tagged_entity_html.length) {
        page_index += 1
        refresh_view()
      }
    }
    function new_entity() {
      if (not_tagged_entity_html.length == 0) { return; }
      tagged_entity_html.push([not_tagged_entity_html.pop()])
      tagged_entity_url.push([not_tagged_entity_url.pop()])
      tagged_entity_count += 1
      refresh_view()
      if ((page_index + 1) * 3 < tagged_entity_html.length) {
        $("#next-page-btn").attr('disabled', false);
      }
      if (not_tagged_entity_html.length == 0) { next_entity(); }
    }

    function tag1() {
      if (not_tagged_entity_html.length == 0) { return; }
      tagged_entity_html[page_index * 3].push(not_tagged_entity_html.pop())
      tagged_entity_url[tagged_entity_url_offset + page_index * 3].push(not_tagged_entity_url.pop())
      tagged_entity_count += 1
      refresh_view()
      if (not_tagged_entity_html.length == 0) { next_entity(); }
    }

    function tag2() {
      if (not_tagged_entity_html.length == 0) { return; }
      tagged_entity_html[page_index * 3 + 1].push(not_tagged_entity_html.pop())
      tagged_entity_url[tagged_entity_url_offset + page_index * 3 + 1].push(not_tagged_entity_url.pop())
      tagged_entity_count += 1
      refresh_view()
      if (not_tagged_entity_html.length == 0) { next_entity(); }
    }

    function tag3() {
      if (not_tagged_entity_html.length == 0) { return; }
      tagged_entity_html[page_index * 3 + 2].push(not_tagged_entity_html.pop())
      tagged_entity_url[tagged_entity_url_offset + page_index * 3 + 2].push(not_tagged_entity_url.pop())
      tagged_entity_count += 1
      refresh_view()
      if (not_tagged_entity_html.length == 0) {
        next_entity();
      }
    }

    function resort() {
      var tmp_entity_html_url = []
      var keyword = $("#keyword").val()
      var reg = new RegExp("<(/)?em>", "g")
      while (tagged_entity_html.length > 0) {
        var current_htmls = tagged_entity_html.pop()
        var current_urls = tagged_entity_url.pop()
        if (keyword == "") {
          var temp_htmls = []
          while (current_htmls.length > 0) {
            temp_htmls.push(current_htmls.pop().replace(reg, ""))
          }
          tmp_entity_html_url.push([temp_htmls, current_urls, temp_htmls.length])
        }
        else {
          var temp_htmls = []
          var temp_urls = []
          var keyword_times = 0
          while (current_htmls.length > 0) {
            var html_split = current_htmls.pop().replace(reg, "").split(keyword)
            if (html_split.length > 1) {
              temp_htmls.push(html_split.join("<em>" + keyword + "</em>"))
              temp_urls.push(current_urls.pop())
            } else {
              temp_htmls.unshift(html_split.join("<em>" + keyword + "</em>"))
              temp_urls.unshift(current_urls.pop())
            }
            keyword_times += html_split.length - 1
          }
          tmp_entity_html_url.push([temp_htmls, temp_urls, keyword_times])
        }
      }
      function compare(a, b) {
        return a[2] - b[2]
      }
      tmp_entity_html_url.sort(compare)
      while (tmp_entity_html_url.length > 0) {
        var current_html_url = tmp_entity_html_url.pop()
        tagged_entity_html.push(current_html_url[0])
        tagged_entity_url.push(current_html_url[1])
      }
      page_index = 0
      refresh_view()
    }

    function untag(entity_index, card_index) {
      var current_cards = tagged_entity_html[page_index * 3 + entity_index]
      var current_urls = tagged_entity_url[tagged_entity_url_offset + page_index * 3 + entity_index]
      var real_index = current_cards.length - 1 - card_index
      if (tagged_entity_html.length == 1 && current_cards.length == 1) {
        alert("都删光了，别删了。")
        return;
      }
      not_tagged_entity_html.push(current_cards[real_index])
      not_tagged_entity_url.push(current_urls[real_index])
      tagged_entity_count -= 1
      current_cards.splice(real_index, 1)
      current_urls.splice(real_index, 1)
      if (current_cards.length == 0) {
        tagged_entity_html.splice(page_index * 3 + entity_index, 1)
        tagged_entity_url.splice(tagged_entity_url_offset + page_index * 3 + entity_index, 1)
        if (page_index * 3 + 1 > tagged_entity_html.length) {
          page_index -= 1
        }
      }
      refresh_view()
    }

    $(document).keydown(function (event) {
      //  alert(event.keyCode)
      if (document.getElementById('keyword') == document.activeElement || window.getSelection().toString().length > 0) {
        event.returnValue = true;
        return;
      }
      switch (event.keyCode) {
        case 49: tag1(); break;
        case 50: tag2(); break;
        case 51: tag3(); break;
        case 37: prev_page(); break;
        case 39: next_page(); break;
        case 81: untag(0, windy1.current); break;
        case 87: untag(1, windy2.current); break;
        case 69: untag(2, windy3.current); break;
        case 187:
        case 38:
          new_entity(); break;
        case 65:
          windy1.prev(); break;
        case 90:
          windy1.next(); break;
        case 83:
          windy2.prev(); break;
        case 88:
          windy2.next(); break;
        case 68:
          windy3.prev(); break;
        case 67:
          windy3.next(); break;
      }
    });
  </script>
</body>

</html>